<template>
	<view class="compose_core">
		<u-navbar :is-back="false" title="">
			<view class="slot_content">
				<view class="nav_img" @click="backTo">
					<image src="@/static/17.svg"></image>
				</view>
				<view class="nav_title">合成中心</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="title">
				<view class="item" @click="router(`/pages/compose/record?id=${id}`)">合成记录</view>
				<view class="item" @click="router(`/pages/compose/ruleDeta?id=${id}`)">活动规则</view>
				<view class="item" @click="router('/pages/my/myCollection?type=1')">我的藏品</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in dataList">
					<view class="img_box" @click="choiceClick(item.id)">
						<image :src="item.cover" v-if="item.number>0"></image>
						<image src="@/static/51.svg" class="more_img" v-else></image>
						<view class="number" v-if="item.number>0" @click="choiceClick(item.id)">
							<text>{{item.number}}/{{item.total}}</text>
							<view class="btn">选择</view>
						</view>
					</view>
					<view class="name" v-if="item.number>0">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_btn" @click="composeOperate">确定合成</view>
		</view>
		<u-popup v-model="show" width="100%" mask-close-able :show-title="false" :show-confirm-button="false">
			<view class="material">
				<u-navbar :is-back="false" title="">
					<view class="slot_content">
						<view class="nav_img" @click="close">
							<image src="@/static/17.svg"></image>
						</view>
						<view class="nav_title">选择合成材料</view>
					</view>
				</u-navbar>
				<view class="content">
					<view class="item" v-for="(item,index) in popupList"
						@click="changePopupIndex(item.product_id,item.id)">
						<image :src="item.product_cover" class="item_image"></image>
						<view class="item_checkbox">
							<image src="@/static/53.svg" class="item_image" v-if="popupIndex.includes(item.id)"></image>
							<image src="@/static/52.svg" class="item_image" v-else></image>
							<view class="name">{{item.product_name}}</view>
						</view>
					</view>
				</view>
				<view class="material_footer">
					<view class="footer_btn" @click="close">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				dataList: [],

				show: false,
				popupList: [],
				popupIndex: []
			}
		},
		async onLoad(option) {
			this.id = option.id;
			let res = await this.$u.api.composeInfo({
				id: this.id
			});
			let need = res.data.need;
			let dataList = [];
			need.forEach(item => {
				dataList.push({
					cover: item.product.cover,
					id: item.product.id,
					name: item.product.name,
					total: item.number,
					number: 0,
					popupIndex: []
				})
			});
			this.dataList = dataList;
		},
		methods: {
			async choiceClick(id) {
				let {
					list
				} = await this.$u.api.orderLists({
					page: 1,
					limit: 100,
					product_id: id,
					status: 1
				});
				this.popupList = list.list;
				this.show = true;

				let dataList = this.dataList;
				let dataItem = dataList.find(item => item.id == id);
				this.popupIndex = dataItem.popupIndex;
				dataItem.number = dataItem.popupIndex.length;
			},
			changePopupIndex(pid, id) {
				let dataList = this.dataList;
				let dataItem = dataList.find(item => item.id == pid);
				let total = dataItem.total;
				let popupIndex = dataItem.popupIndex;

				let idx = popupIndex.indexOf(id);
				if (idx > -1) {
					popupIndex.splice(idx, 1);
				} else {
					popupIndex.push(id);
				};

				this.popupIndex = popupIndex;
				if (popupIndex.length > total) {
					popupIndex.splice(popupIndex.length - 1, 1);
					this.$refs.uToast.show({
						title: '选择上限',
						type: 'error'
					})
				};
				dataItem.number = popupIndex.length;
			},
			async composeOperate() {
				let dataList = this.dataList;
				let popupIndex = [];
				dataList.forEach(item => {
					popupIndex = [...popupIndex, ...item.popupIndex];
				});
				let res = await this.$u.api.composeOperate({
					id: this.id,
					order_ids: popupIndex
				});
				let id = res.order_id;
				this.$u.toast("合成成功");
				setTimeout(() => {
					let url = `/pages/compose/success?id=${id}`;
					uni.redirectTo({
						url
					});
				}, 1000);
			},
			close() {
				this.show = false;
			},
			backTo() {
				uni.navigateBack()
			},
			router(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$footerHeight:170rpx;

	.footer {
		width: 100%;
		height: $footerHeight;
		border-top: 1px solid #C2C2C2;
		padding: 20rpx 30rpx 0;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;

		.footer_btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 10rpx;
			background: #6BD288;
		}
	}

	.compose_core {
		padding-bottom: $footerHeight;
		box-sizing: border-box;

		.content {
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				margin: 44rpx 0;
				display: flex;
				justify-content: space-between;

				.item {
					width: 210rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #787878;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 20rpx;
					background: #F0F0F0;
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 330rpx;
					margin-bottom: 36rpx;

					.img_box {
						width: 330rpx;
						height: 330rpx;
						border-radius: 20rpx;
						background: #F0FBF3;
						overflow: hidden;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.item_img {
							width: 100%;
							height: 100%;
						}

						.more_img {
							width: 48rpx;
							height: 48rpx;
						}

						.number {
							width: 314rpx;
							height: 68rpx;
							border-radius: 14rpx;
							padding: 0 16rpx;
							box-sizing: border-box;
							background: #F0FBF3;
							position: absolute;
							left: 8rpx;
							bottom: 8rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								color: #C2C2C2;
								font-size: 24rpx;
							}

							.btn {
								width: 72rpx;
								height: 44rpx;
								line-height: 44rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 24rpx;
								border-radius: 8rpx;
								background: #6BD288;
							}
						}
					}

					.name {
						width: 100%;
						text-align: center;
						color: #2A2A2A;
						font-size: 28rpx;
						margin-top: 16rpx;
					}
				}
			}
		}
	}

	$material:170rpx;

	.material {
		.content {
			padding: 44rpx 30rpx $material;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 320rpx;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #F0FBF3;

				.item_image {
					width: 100%;
					height: 290rpx;
					border-radius: 10rpx;
				}

				.item_checkbox {
					height: 36rpx;
					margin-top: 22rpx;
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 16rpx;
					}

					.name {
						flex: 1;
						width: 0;
						color: #0D0D0D;
						font-size: 24rpx;
						font-weight: 400;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;

			position: absolute;
			left: 0;
			bottom: 20rpx;
			z-index: 2;
		}

		.material_footer {
			width: 100%;
			height: $material;
			border-top: 1px solid #C2C2C2;
			padding: 20rpx 30rpx 0;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;

			.footer_btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 10rpx;
				background: #6BD288;
			}
		}
	}
</style>
